<template>
  <div class="recordCont" :style="'min-height: '+docheight+'px'">
    <div  v-if="!showTimeOut">
      
      <div class="openCont">
        <div class="openTop">消费记录</div>
        <div :class="index==0?'openList noBorder':'openList'" :key="index" v-for="(item,index) in recordList">
          <div class="recordNum">订单编号：{{ item.bill_number }}</div>
          <div class="recordTop">
            <div class="openLeft">
                <div class="openNum">{{ item.bill_type==1?'消费':'退款' }}</div>
                <div class="openTime">{{ item.create_time }}</div>
            </div>
            <div class="openMoney" v-if="item.bill_type==1">{{ item.bill_money }}</div>
            <div class="greenBtn" v-if="item.bill_type==2">+{{ item.bill_money }}</div>
          </div>
        </div>
        <div class="loadMore" v-if="recordList.length>0">{{ loadMoreText }}</div>
        <nodata v-if="recordList.length==0" text="暂无消费记录~"></nodata>
      </div>
      <toast v-model="showToast" position="middle" width="50%" type="text" :time="1000">{{showText}}</toast>
    </div>
    <getLoad v-if="!showCont"></getLoad>
    <getTimeOut v-if="showTimeOut"></getTimeOut>
  </div>
</template>

<script>
  import topcpm from '@/components/topcpm.vue'
  import {Rechargerecord} from "@/http/api";
  import {Toast } from 'vux'
  import getLoad from '@/components/public/getLoad'
  import getTimeOut from '@/components/public/getTimeOut'
  import nodata from '@/components/public/nodata'

export default {
  components: {nodata,getLoad,getTimeOut,topcpm,Toast},
  data() {
    return {
      showTimeOut: false,
      showCont:false,
      showText:'',
      showToast:false,
      // 分页
      per_page:10,
      page:1,
      loadMoreText:'数据加载中~',
      getting:false,
      recordList:[],
      last_page:0,
    }
  },
  props: {},
  methods: {
    getData(){
      let data ={
        order_status:this.stepId,
        package_name:this.serchKey,
        per_page:this.per_page,
        page:this.page,
      }
      Rechargerecord(data).then((res)=>{
        if(res.data.code==1){
          let arr = res.data.data.data
          for(let i=0;i<arr.length;i++){
            this.recordList.push(arr[i])
          }
          setTimeout(() => {
            this.getting = false
          }, 100);
          this.last_page = res.data.data.last_page
          if(this.page==this.last_page){
            this.loadMoreText = '到底啦～'
          }else{
            this.loadMoreText = '数据加载中~'
          }
        }else{
          this.showToast = true
          this.showText = '订单获取失败'
        }
        this.showCont= true
      }).catch(()=>{
        this.showCont = true
        this.showTimeOut = true
      })
    },
    nextfn(){
      if(this.$route.path == '/record'){
        let h = document.documentElement.scrollHeight||document.body.scrollHeight
        let wh = document.documentElement.clientHeight||document.body.clientHeight
        let top = document.documentElement.scrollTop||document.body.scrollTop
        let bottom = h-wh-top
        if(bottom<=50){
          if(this.getting==false){
            if(this.last_page>this.page){
              this.getting=  true
              this.page++
              this.getData()
            }
          }
        }
      }
    }
  },
  mounted() {
    window.addEventListener('scroll',this.nextfn)
  },
  created() {
      this.getData()
  },
}
</script>

<style scoped lang="less">
.recordCont{
  width: 100%;
  background-color: #f9f1f1;
  padding-bottom: 0.75rem;
  box-sizing: border-box;
  padding-top: 0.75rem;
  .openCont{
      width: 92%;
      padding: 0.75rem 4%;
      box-sizing: border-box;
      border-radius: 0.5rem;
      margin: 0 auto;
      background-color: #fff;
      .openTop{
          font-size: 0.8rem;
          font-weight: bold;
      }
      .openList{
          padding: 0.75rem 0;
          box-sizing: border-box;
          border-top: 1px dashed #e95551;
          .recordTop{
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 0.25rem;
            .openNum{
                font-weight: bold;
                margin-bottom: 0.25rem;
            }
            .openTime{
                color: #e95551;
                font-size: 0.6rem;
            }
            .openMoney{
                color: #e95551;
                font-size: 0.8rem;
            }
            .greenBtn{
              color: #85CE61;
              font-size: 0.8rem;
            }
          }
      }
      .loadMore{
          text-align: center;
          padding: 0.75rem 0;
          font-size: 0.6rem;
          color: #e95551;
        }
      .noBorder{
          border-top: none;
      }
  }
}
</style>
